<template>
  <div>
    <Row :gutter="4" >
<!--      <Col span="3"><Dateselect ref="eventTime" v-model="dateRange" :placeholder="param.date"></Dateselect> </Col>
      <Col span="3"><Input clearable :placeholder="param.deviceCode" v-model="queryParam.where.deviceCode"></Input> </Col>-->
      <Col span="5"><DateTimeRangeSelect ref="eventTime" v-model="dateRange" :placeholder="$t('datetime')" width="100%"></DateTimeRangeSelect></Col>
      <Col span="4"><Device5gModelSelect :cate=2 ref="device5gModelSelect" width="100px" v-model="queryParam.where.deviceId"/> </Col>

      <!--      <Col span="3"><Orgselect ref="srhOrgSelect" width="200px" v-model="queryParam.where.orgId"></Orgselect> </Col>-->
      <Col span="4"><OrganizationTree ref="srhOrgSelect" width="200px" v-model="queryParam.where.orgId"></OrganizationTree> </Col>
      <Col span="4"><UserSelect ref="srhUserSelect" width="200px" v-model="queryParam.where.userId" :placeholder="$t('select_people')"></UserSelect> </Col>
      <Col span="4">
        <Select v-model="queryParam.where.alarmCate"  :placeholder="param.alarmType" clearable>
          <Option v-for="item in alarmCates" :value="item.code" :key="item.code">{{ item.desc }}</Option>
        </Select>
      </Col>

      <Col span="1"><Button type="primary" icon="ios-search" @click="getData">{{param.search}}</Button></Col>
    </Row>

    <Table border :columns="columns" :data="tableData" :loading="tableLoading">
    </Table>
    <TopnavPage v-model="queryParam.page" @changePage="changePage"></TopnavPage>
  </div>
</template>
<script>
import DateTimeRangeSelect from "_c/topnav/DateTimeRangeSelect"
import Device5gModelSelect from "_c/topnav/Device5gModelSelect";
import TopnavPage from "_c/topnav/TopnavPage";
import OrganizationTree from "_c/topnav/OrganizationTree";
import Dateselect from "_c/topnav/date2select"
import UserSelect from "_c/topnav/UserModelSelect";
import StatisticsOnlineDetail from "@/view/Home/Moudle/statistics/StatisticsOnlineDetail";
import DeviceAlarm from "@/api/DeviceAlarm";
import EnumQuery from "@/api/EnumQuery";
import {apiResult} from "@/libs/util";
export default {
  name: 'StatisticsAlarm',
  components: {TopnavPage, OrganizationTree, DateTimeRangeSelect,Device5gModelSelect, UserSelect, StatisticsOnlineDetail},
  computed:{
    param(){
      return {
        date: this.$t('date'),
        deviceCode:this.$t('device_code'),
        alarmType:this.$t('alarm_type'),
        search:this.$t('search')
      }
    },
    columns(){
      return [
        {title: this.$t('sequence_number'), key: 'totalCode', sortable: true, width: 200, align: 'center'},
        {title: this.$t('alarm_type'), key: 'totalName', sortable: true, width: 250},
        {title: this.$t('quantity'), key: 'total', sortable: true, width: 200},
      ]
    },
  },
  data() {
    return {
      api: new DeviceAlarm(),
      enumQuery: new EnumQuery(),
      alarmCates:[],
/*      columns: [
        {title: '序号', key: 'totalCode', sortable: true, width: 80, align: 'center'},
        {title: '报警类型', key: 'totalName', sortable: true, width: 200},
        {title: '数量', key: 'total', sortable: true, width: 200},
      ],*/
      dateRange: [],
      queryParam: {
        page: {
          pages: 1,
          size: 15,
          total: 0,
          current: 1,
        },
        where: {
          keyword: null,
          deviceId: null,
          fromTime: null,
          toTime: null,
          userId: null,
          orgId: null,
          deviceCode: null,
          isGroupBy: true,
          alarmCate: null
        },
      },
      tableData: [],
      tableLoading: false

    }
  },
  methods: {
    changePage() {
      this.getData()
    },
    getData() {
      this.tableLoading = true;
      /** 生成查询条件 */
      if (!(this.dateRange == null || this.dateRange.length < 2 || this.dateRange[0] == "")) {
        this.queryParam.where.fromTime = this.dateRange[0];
        this.queryParam.where.toTime = this.dateRange[1];
      }
      this.api.countGroupByCatePage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = [];
        this.tableLoading = false;
        apiResult(res.data,false,result=>{
          this.queryParam.page.total = result.data.total;
          this.tableData = result.data.records;
          if (!!this.tableData && this.tableData.length > 0){
            this.tableData.forEach(item=>{
              item.totalName = this.$t('alarm_cate_' + item.totalCode)
              //console.log(item)
            })
          }
        });
      })
    },
  },
  mounted() {
    /** 为了显示用，调置默认值 */
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    start.setHours(0);
    start.setMinutes(0);
    start.setSeconds(0);
    start.setMilliseconds(0);
    end.setHours(23);
    end.setMinutes(59);
    end.setSeconds(59);
    end.setMilliseconds(999);

    this.dateRange = [start, end];
    this.getData();

    /** 查询上下线事件 */
    this.enumQuery.get("DeviceAlarmCate").then(res => {
      apiResult(res.data,false,result=>{
        this.alarmCates=[];
        if (!!result.data && result.data.length>0){
          result.data.forEach(item=>{
            this.alarmCates.push(
              {
                code:item.code,
                desc:this.$t('alaram_cate_' + item.code)
              }
            )
          })
        }
      })
    })
  }
}
</script>

